<template>
  <div>
    <p>任务记录</p>
    <p>报表任务记录</p>
    <!-- 信息表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="200"> </el-table-column>
      <el-table-column prop="taskName" label="任务名" width="180">
      </el-table-column>
      <el-table-column prop="taskState" label="状态" width="150">
      </el-table-column>
      <el-table-column label="操作">
        <el-button size="mini" plain>下载软件包</el-button>
        <el-button size="mini" plain>下载过程日志</el-button>
        <el-button size="mini" plain>下载测评报告</el-button>
        <el-button size="mini" plain>详情</el-button>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="pagechange"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { baseUrls } from "@/main.js";
export default {
  data() {
    return {
      //测试任务表格
      tableData: [],
      //表格总数据
      total: 1,
      //当前页
      page: 1,
    };
  },
  methods: {
    //获得任务记录信息
    getReportRecord() {
      this.$http.get(`${baseUrls.base2}/task/page` + `?taskType=2&currentPage=${this.page}`).then((res) => {
        this.total = res.data.data.total;
        res.data.data.records.forEach((i) => {
          this.tableData.push(i);
          this.tableData.forEach((j) => {
            switch (j.taskState) {
              case 0:
                j.taskState = "已创建";
                break;
              case 1:
                j.taskState = "进行中";
                break;
              case 2:
                j.taskState = "已完成";
                break;
              case 3:
                j.taskState = "已失败";
                break;
              case 4:
                j.taskState = "已取消";
                break;
            }
          });
        });
      });
    },

    //页数改变
    pagechange(page) {
      this.page = page;
      this.tableData = [];
      this.getReportRecord();
    },  

  },
  //生命周期函数
  created() {
    this.getReportRecord();
  },
};
</script>
<style scoped>
</style>
